<template>
  <div class="dashboard-container">
    <el-button @click="add">add</el-button>
    <el-button @click="me">Me</el-button>
    <!-- <el-button @click="del">del</el-button> -->
    <!-- <el-button @click="mod">mod</el-button> -->
    <p>myInfo: {{ JSON.stringify(myInfo) }}</p>
    <p>add result: {{ JSON.stringify(addResult) }}</p>
    <p>del result: {{ JSON.stringify(delResult) }}</p>
    <p>mod result: {{ JSON.stringify(modResult) }}</p>
    <el-input v-model="form.username" placeholder="username" />
    <el-input v-model="form.password" placeholder="password" />
    <el-input v-model="form.nickname" placeholder="nickname" />
    <el-input v-model="form.deptId" placeholder="deptId" />
    <el-input v-model="form.phone" placeholder="phone" />
    <!-- <el-input v-model="delId" placeholder="delId" /> -->
    {{ form }}

    <p>user List</p>
    <ul>
      <li v-for="item in userList" :key="item.id">{{ item.username }}
        <el-button @click="del(item.id)">删除</el-button>
        <el-button @click="mod(item.id)">修改</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { add, del, mod, list, info } from '@a/userTest'

export default {
  name: 'Dashboard',
  data() {
    return {
      form: {
        username: '',
        password: '',
        nickname: '',
        deptId: '',
        phone: ''
      },
      userList: [],
      delId: '',
      myInfo: '',
      addResult: '',
      delResult: '',
      modResult: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getList()
  },
  methods: {
    me() {
      info().then(res => {
        this.myInfo = res
        // if (res.code === 0) {
        //   this.myInfo = res
        // }
      })
    },
    init() {
      this.form = {
        username: '',
        password: '',
        nickname: '',
        deptId: '',
        phone: ''
      }
    },
    add() {
      add(this.form).then(res => {
        this.addResult = res
        if (res.code === 0) {
          this.getList()
          this.init()
        }
      })
    },
    del(id) {
      del(id).then(res => {
        this.delResult = res
        if (res.code === 0) {
          this.getList()
          this.init()
        }
      })
    },
    mod(id) {
      mod({
        ...this.form,
        id
      }).then(res => {
        this.modResult = res
        if (res.code === 0) {
          this.getList()
          this.init()
        }
      })
    },
    getList() {
      list().then(res => {
        if (res.code === 0) {
          this.userList = res.result
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
